<template>
  <div id="detailPage">
    <Header />
    <Nav />
    <div class="content detail">
      <el-card>
        <div class="title"><h2>景点详情</h2></div>
        <h1>{{ items.value.title }}</h1>
        <p><h4>{{ items.value.desc }}</h4></p>
        <p>
            <img :src="items.value.img" alt="" width="500" height="300">
        </p>
        <p>
            旅游线路:
        </p>
        <div v-for="item in items.value.line" class="line">
            {{ item.title }} -- ￥{{ item.price }}
            <span class="gobuy" @click="buy(item)">点击购买</span>
        </div>
        <div class="collect" @click="collect">点击收藏</div>
      </el-card>
    </div>
    <Bottom/>
  </div>
</template>

<script setup>
import Header from "@/components/Header.vue";
import Nav from "@/components/Nav.vue";
import Bottom from "@/components/Bottom.vue";
import { ref, watch, reactive, computed, watchEffect } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";

const store = useStore();
const route = useRoute();
const id = ref(null);
// 监听路由参数的变化
watch(
  () => route.query.id,
  (newId, oldId) => {
    id.value = newId;
  }
);
id.value = route.query.id;

const scenicSpotList = computed(() => {
  return store.state.scenicSpotList;
});

const items = reactive({});
watchEffect(() => {
  items.value = scenicSpotList.value.find((item) => item.id == id.value);
});

const isLogin = computed(() => {
			return localStorage.isLogin || 0;
		});

const collect = () => {
  if (isLogin.value == 0) {
    return ElMessage({
      message: "请先登录！",
      type: "error"
    });
  }
  let collectList = JSON.parse(localStorage.getItem("collectList")) || [];
  const v = collectList.find((item) => item.id == items.value.id);
  if (v) {
    return ElMessage({
      message: "已有该收藏！",
      type: "error"
    });
  }
  collectList.push(items.value);
  localStorage.setItem("collectList", JSON.stringify(collectList));
  ElMessage({
    message: "收藏成功！",
    type: "success"
  });
};

const buy=(item)=>{
  let orderList = JSON.parse(localStorage.getItem("orderList")) || [];
  const currentTime = new Date();
  let obj={
    img:items.value.img,
    travel:items.value.title,
    ...item,timestamp: currentTime
  }
  orderList.push(obj);
  localStorage.setItem("orderList", JSON.stringify(orderList));
  ElMessage({
    message: "付款成功！",
    type: "success"
  });
}
</script>

<style lang="scss" scoped>
.detail {
  margin-top: 30px;
  ::v-deep .el-card {
    width: 100%;
  }
  .title {
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #e3e3e3;
    margin-bottom: 20px;
  }
  .line{
    padding: 16px;
    margin: 16px;
    cursor: pointer;
	box-shadow: 0 0 5px #d7d7d7;
    &:hover{
        background-color: #f3f3f3;
    }
  }

  .gobuy{
    padding: 10px;
    color: white;
    border-radius: 16px;
    background-color: #454545;
    float: right;
    margin-top: -10px;
  }

  p{
    margin: 30px 0;
  }

  .collect{
    text-align: center;
    margin: auto;
    width: 200px;
    height: 40px;
    line-height: 40px;
    color: white;
    background-color: #454545;
    cursor: pointer;
  }
}
</style>
